<template>
  <div class="container">
    <h5>watch 侦听器</h5>
    {{ count }}
    <button @click="add">+1</button>
    {{ obj.name }}
    {{ obj.brand[0].name }}
    <button @click="updateName">修改名字</button>
    <button @click="updatebrandName">修改品牌</button>
  </div>
</template>

<script>
import { ref, watch, reactive } from "vue";

export default {
  name: "App",

  setup() {
    const count = ref(0);
    const add = () => {
      count.value++;
    };

    // 监听数据的变化 使用侦听器
    // 1，监听ref值  新值旧值
    // 监听的目标 回调函数

    watch(count, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });

    // 2，监听 reactive
    const obj = reactive({
      name: "ls",
      age: 18,
      brand: [
        {
          id: 3,
          name: "宝马",
        },
      ],
    });
    const updateName = () => {
      obj.name = "zs";
    };
    const updatebrandName = () => {
      obj.brand[0].name = "奥迪";
    };
    //   watch(obj,() => {
    //    // 2，监听 reactive   新值旧值一样
    //       console.log('数据改变啦');
    //    })
    // 5，改obj -》brand->name  第三个参数 deep 立即监听
   //  obj是总代理  ()=>obj.brand 这样单独监听对象中的属性变化，要开启深度监听
    watch(()=>obj.brand, () => {
      // 2，监听 reactive   新值旧值一样
      console.log("brand数据改变啦");
    },
    {
      // 深度监听
      deep:true,
      // 立即先执行一次
      immediate:true
   }
    
    );

    //3 同时监听 count和 obj   监听多个数据变化 数组
    //    watch([obj,count],() => {
    // console.log('监听多个数据改变啦');
    //    })
    // 4 此时此刻只想 监听到对象中的某个属性    obj 中的name
    // ()=>obj.name, 固定写法 写成函数返回改属性
    // watch( ()=>obj.name,() => {
    //    console.log('监听   obj 中的name改变啦');

    // })
   //  
// 深度监听   
    return { count, add, updateName, obj, updatebrandName };
  },
};
</script>

<style>
</style>